<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link href="/skin/css/amazeui.min1.css" rel="stylesheet" type="text/css" />
    <link href="/user/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/user/js/jquery.js"></script>
    <script src="/skin/js/clipboard.min.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>订单列表-会员中心</title>
<script>
    // 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
    (function(){
        var docEl = document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        function recalc() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
        }
        if (!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
        recalc();
    })();
</script>
<style>
    a{-webkit-tap-highlight-color:transparent;outline:none;}
    body{background:#f3f5f8;overflow:hidden;margin:0;padding:0;}
    .orderlist{height:calc(100vh - 1rem);display:flex;flex-direction:column;overflow:hidden;}
    
    /* 顶部导航栏 */
    .order-header{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0.16rem;border-bottom:0.01rem solid #f1f5f9;}
    .order-header .back-btn{width:0.2rem;height:0.2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .order-header .back-btn img{width:0.12rem;height:0.12rem;}
    .order-header .title{font-size:0.18rem;font-weight:700;color:#111827;flex:1;text-align:center;}
    .order-header .right-icons{display:flex;gap:0.16rem;align-items:center;flex-shrink:0;}
    .order-header .right-icons a{width:0.2rem;height:0.2rem;display:flex;align-items:center;justify-content:center;}
    .order-header .right-icons img{width:0.16rem;height:0.16rem;}
    
    /* 标签栏 */
    .order-tabs{display:flex;height:0.5rem;flex-shrink:0;position: sticky;}
    .order-tabs .tab-item{flex:1;text-align:center;font-size:0.14rem;color:#64748b;text-decoration:none;position:relative;font-weight:400;line-height:0.5rem;}
    .order-tabs .tab-item.active{color:#111827 !important;font-weight:700 !important;}
    
    /* 订单列表 */
    .order-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0.12rem;padding-top:0;background:#f5f7fb;-webkit-overflow-scrolling:touch;}
    .order-card{background:#fff;border-radius:0.04rem;padding:0.16rem;margin-bottom:0.12rem;box-shadow:0 0.02rem 0.08rem rgba(0,0,0,0.04);cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .order-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.12rem;padding-bottom:0.12rem;border-bottom:0.01rem solid #F7F7F7;}
    .order-date{font-size:0.14rem;color:#31374c;font-weight: 600;}
    .order-status{font-size:0.14rem;font-weight:700;}
    .order-status.status-pending{color:#374774;}
    .order-status.status-shipped{color:#345643;}
    .order-status.status-completed{color:#333333;}
    .order-product{display:flex;gap:0.12rem;align-items:center;margin-bottom:0.12rem;background: #F7F7F7;padding: .12rem;border-radius: 0.08rem;}
    .order-product:last-child{margin-bottom:0;}
    .order-product .product-thumb{display:block;flex-shrink:0;}
    .order-product img{width:0.8rem;height:0.8rem;border-radius:0.08rem;object-fit:cover;flex-shrink:0;display:block;}
    .order-product-name{flex:1;font-size:0.14rem;color:#31374C;line-height:1.5;font-weight: 600;}
    
    /* 空状态 */
    .order-empty{text-align:center;padding:1rem 0;color:#64748b;}
    .order-empty .empty-text{font-size:0.14rem;color:#64748b;}
    
    /* 订单详细信息 */
    .order-detail-section{margin-top:0.12rem;padding-top:0.12rem;border-top:0.01rem solid #f1f5f9;}
    .order-detail-row{display:flex;justify-content:space-between;align-items:center;padding:0.08rem 0;font-size:0.13rem;}
    .order-detail-label{color:#64748b;}
    .order-detail-value{color:#111827;font-weight:600;}
    .order-detail-value.price{color:#ef4444;font-size:0.15rem;font-weight:700;}
    
    /* 物流信息 */
    .logistics-info{background:#f8f9fa;border-radius:0.08rem;padding:0.12rem;margin-top:0.08rem;}
    .logistics-info p{font-size:0.13rem;color:#64748b;line-height:1.6;margin:0.04rem 0;}
    .logistics-info a{color:#253043;text-decoration:underline;margin-left:0.08rem;}
    
    /* 核销码 */
    .verify-code{background:#f0fdf4;border:0.01rem solid #86efac;border-radius:0.08rem;padding:0.12rem;margin-top:0.08rem;text-align:center;}
    .verify-code p{font-size:0.14rem;color:#16a34a;font-weight:700;margin:0;}
    
    /* 订单操作按钮 */
    .order-actions{display:flex;gap:0.12rem;margin-top:0.12rem;padding-top:0.12rem;border-top:0.01rem solid #f1f5f9;}
    .order-actions .order-btn{flex:1;height:0.36rem;border-radius:0.01rem;font-size:0.13rem;font-weight:600;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:none;display:flex;align-items:center;justify-content:center;}
    .order-actions .btn-confirm{background:#253043;color:#fff;}
    .order-actions .btn-confirm:active{opacity:0.8;}
    .order-actions .btn-exchange{background:#f1f5f9;color:#253043;border:0.01rem solid #e5e7eb;}
    .order-actions .btn-exchange:active{background:#e5e7eb;}
    .order-actions .btn-select{background:#16a34a;color:#fff;}
    .order-actions .btn-select:active{opacity:0.8;}
    
    /* 弹窗遮罩 */
    .zc{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;display:none;}
    
    /* 禁止背景滚动 */
    body.modal-open{
        overflow:hidden !important;
        position:fixed !important;
        width:100% !important;
        height:100vh !important;
    }
    .modal-open .orderlist{
        overflow:hidden !important;
    }
    
    /* 回寄信息弹窗 */
    .bili{
        position:fixed;
        top:50%;
        left:50%;
        transform:translate(10%, -50%);
        -webkit-transform:translate(10%, -50%);
        width:85%;
        max-width:3.5rem;
        max-height:80vh;
        background:#fff;
        border-radius:0.12rem;
        padding:0;
        z-index:1000;
        display:none;
        box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3);
        overflow:hidden;
    }
    .bili .p0{
		background: none;
        color:black;
        font-size:0.16rem;
        font-weight:700;
        text-align:center;
        padding:0.16rem;
		padding-top:0;
        margin:0;
        height:auto;
        line-height:1.4;
        flex-shrink:0;
    }
    .bili form{
        padding:0.24rem;
        max-height:calc(80vh - 0.48rem);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .bili .form-group{margin-bottom:0.16rem;}
    .bili .form-input{width:100%;height:0.44rem;border:0.01rem solid #e5e7eb;border-radius:0.08rem;padding:0 0.12rem;font-size:0.14rem;outline:none;box-sizing:border-box;}
    .bili .form-input:focus{border-color:#253043;}
    .bili .address-box{background:#f8f9fa;border:0.01rem solid #e5e7eb;border-radius:0.08rem;padding:0.12rem;margin-bottom:0.16rem;}
    .bili .address-label{font-size:0.12rem;color:#64748b;margin-bottom:0.08rem;}
    .bili .address-content{font-size:0.14rem;color:#1e293b;line-height:1.6;margin-bottom:0.08rem;}
    .bili .copy-address{display:inline-block;background:#253043;color:#fff;padding:0.04rem 0.12rem;border-radius:0.04rem;font-size:0.12rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .bili .copy-address:active{opacity:0.8;}
    .bili .action-buttons{display:flex;gap:0.12rem;margin-top:0.24rem;}
    .bili .action-buttons a{flex:1;height:0.44rem;display:flex;align-items:center;justify-content:center;border-radius:0.04rem;font-size:0.15rem;font-weight:600;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
    .bili .btn-cancel{background:#f1f5f9;color:#64748b;border:0.01rem solid #e5e7eb;}
    .bili .btn-cancel:active{background:#e5e7eb;}
    .bili .btn-done{background:#253043;color:#fff;}
    .bili .btn-done:active{opacity:0.8;}
</style>
</head>
<body class="body">
<div class="main">
    <div class="orderlist">
        <!-- 顶部导航栏 -->
        <header id="header">
            <section class="head-b head-b1">
                <span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
                <h1 id="t0">我的订单</h1>
                <div class="u-right" href="#">
                    <a href="/" class="hSearch right"><img src="/skin/img/i_home.png"/></a>
                </div>
            </section>
        </header>
        
        <!-- 标签栏 -->
        <div class="order-tabs">
            <a href="orderlist.php?type={$type}" class="tab-item {if($state!=2 && $state!=3 && $state!=4)}active{/if}">全部</a>
            <a href="orderlist.php?type={$type}&state=2" class="tab-item {if($state==2)}active{/if}">待发货</a>
            <a href="orderlist.php?type={$type}&state=3" class="tab-item {if($state==3)}active{/if}">待收货</a>
            <a href="orderlist.php?type={$type}&state=4" class="tab-item {if($state==4)}active{/if}">已完成</a>
        </div>
        <div class="order-list">
            {if($msg==1)}
            {loop $olist $key as $list}
            <div class="order-card" onclick="window.location.href='order_detail.php?id={$list[Id]}';">
                <div class="order-header-row">
                    <div class="order-date">{$list[addtime]}</div>
                    {if($list['type']==2 && $list['state']==2)}
                    <div class="order-status status-pending">
                    {elseif($list['type']==2 && $list['state']==3)}
                    <div class="order-status status-shipped">
                    {elseif($list['state']==4)}
                    <div class="order-status status-completed">
                    {else}
                    <div class="order-status">
                    {/if}
                        {if($list['type']==2)}
                            {$osarr2[$list[state]]}
                        {else}
                            {$osarr1[$list[state]]}
                        {/if}
                        {if($list['zh']==1)}
                            <span style="color:#ef4444;">[已置换]</span>
                        {elseif($list['gtype']>0 && $list['jhstate']>0)}
                            <span style="color:#ef4444;">[置换中]</span>
                        {/if}
                    </div>
                </div>
                {$gdlist = $list['glist']}
                {for $gdlist $i}
                <div class="order-product">
                    <div class="product-thumb">
                        <img src="{$gdlist[$i][thumb]}" alt="{$gdlist[$i][name]}" />
                    </div>
                    <div class="order-product-name">{$gdlist[$i][name]}</div>
                </div>
                {/for}
                
                <!-- 订单详细信息 -->
                <div class="order-detail-section">
                    <!-- 订单金额 -->
                    <div class="order-detail-row">
                        <span class="order-detail-label">订单金额</span>
                        <span class="order-detail-value price">¥{$list[cash]}</span>
                    </div>
                    
                    <!-- 支付方式 -->
                    <div class="order-detail-row">
                        <span class="order-detail-label">支付方式</span>
                        <span class="order-detail-value">{$payarr[$list[pay]]}</span>
                    </div>
                    
                    <!-- 物流信息（邮寄订单） -->
                    {if($list['type']==2)}
                        {if($list['trackname'])}
                        <div class="logistics-info">
                            <p><strong>物流信息</strong></p>
                            <p>{$list[trackname]} - {$list[trackcode]}
                                <a href="https://m.kuaidi100.com/result.jsp?nu={$list[trackcode]}" onclick="event.stopPropagation();">查看物流</a>
                            </p>
                        </div>
                        {/if}
                    {else}
                        <!-- 核销码（非邮寄订单） -->
                        <div class="verify-code">
                            <p>核销码: {$list[hxcode]}</p>
                        </div>
                    {/if}
                    
                    <!-- 完成时间 -->
                    {if($list['endtime'])}
                    <div class="order-detail-row">
                        <span class="order-detail-label">完成时间</span>
                        <span class="order-detail-value">{$list[endtime]}</span>
                    </div>
                    {/if}
                    
                    <!-- 回寄物流信息（置换订单） -->
                    {if($list['gtype']>0 && $list['state']==4 && $list['cplx']==2)}
                        {if($list['jhstate']>0)}
                        <div class="logistics-info">
                            <p><strong>回寄物流</strong></p>
                            <p>{$list[trackname1]} - {$list[trackcode1]}
                                <a href="https://m.kuaidi100.com/result.jsp?nu={$list[trackcode1]}" onclick="event.stopPropagation();">查看物流</a>
                            </p>
                            <p>回寄时间: {$list[jhtime]}</p>
                            {if($list['jhendtime'])}
                            <p>确认时间: {$list[jhendtime]}</p>
                            {/if}
                        </div>
                        {/if}
                    {/if}
                </div>
                
                <!-- 订单操作按钮 -->
                {if($list['state']==3 || ($list['gtype']>0 && $list['state']==4 && $list['cplx']==2))}
                <div class="order-actions" onclick="event.stopPropagation();">
                    {if($list['state']==3)}
                    <button class="order-btn btn-confirm orderdone" data-id="{$list[Id]}">确认收货</button>
                    {/if}
                    
                    {if($list['gtype']>0 && $list['state']==4 && $list['cplx']==2)}
                        {if($list['jhstate']>0)}
                            {if($list['zh']==0)}
                            <a class="order-btn btn-select" href="/catgory.php?gtype={$list[gtype]}">选择产品</a>
                            {/if}
                        {else}
                            <button class="order-btn btn-exchange zh" data-id="{$list[Id]}">置换产品</button>
                        {/if}
                    {/if}
                </div>
                {/if}
            </div>
            {/loop}
            {$page}
            {else}
            <div class="order-empty">
                <p class="empty-text">未查询到订单信息</p>
            </div>
            {/if}
        </div>

        <!-- 弹窗遮罩 -->
        <div class='zc'></div>
        
        <!-- 回寄信息弹窗 -->
        <div class='bili'>
            <form class="hj">
                <div class='p0'>回寄信息</div>
                
                <div class="form-group">
                    <input type='text' class="form-input" name='t0' value='' placeholder='请输入快递公司' />
                </div>
                
                <div class="form-group">
                    <input type='text' class="form-input" name='t1' value='' placeholder='请输入快递单号' />
                </div>
                
                <input type='hidden' name='oid' id='oid' value='' />
                
                <div class="address-box">
                    <div class="address-label">回寄地址</div>
                    <div class="address-content">
                        {$set[tname]} {$set[phone]}<br/>
                        {$set[address]}
                    </div>
                    <span class="fuzhi copy-address">复制地址</span>
                </div>
                
                <div class="action-buttons">
                    <a class='cancel btn-cancel'>取消</a>
                    <a class='done btn-done'>确认</a>
                </div>
            </form>
        </div>
        <div class="copyCj">
            <textarea id="foo" value=""></textarea>
            <button class="btn" data-clipboard-target="#foo"></button>
        </div>
        <div class="copyTishi" style='display:none;'>
    
        </div>
        <div class="tishiBg"></div>
        <script>
            $(".orderdone").on("click",function(){
                var msg = confirm("确认收货后，订单状态将变为已完成，请确认收货后再点击确认收货");
                if(msg==false){
                    return false;
                }
                var id = $(this).attr("data-id");
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url:"/Moudelu.php?m=g&a=orderdone",
                    data:"oid="+id,
                    success:function(d){
                        if(d[0]==0){
                            alert(d[1]);
                        }else{
                            alert(d[1]);
                            window.location.href='orderlist.php?type={$type}&state={$state}';
                        }
                    }
                });
            });
            $(".done").on("click",function(){
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url:"/Moudelu.php?m=g&a=orderback",
                    data:$(".hj").serialize(),
                    success:function(d){
                        if(d[0]==0){
                            alert(d[1]);
                        }else{
                            alert(d[1]);
                            $("body").removeClass("modal-open").css('top', '');
                            window.location.href='orderlist.php?type={$type}&state={$state}';
                        }
                    }
                });
            });
            let wz = `{$set[tname]} {$set[phone]} {$set[address]}`;
            var clipboard = new ClipboardJS('.btn');
            clipboard.on('success', function() {
                $(".copyTishi").html(`<img src="/skin/img/success.png" /><p>复制成功</p>`);
                tishi();
            });
            clipboard.on('error', function() {
                $(".copyTishi").html(`<img src="/skin/img/error.png" /><p>复制失败 请手动复制</p>`);
                tishi();
            });
            $(".fuzhi").click(function (){
                $('#foo').val(wz);
                $(".btn").click();
            });
            function tishi() {
                $(".copyTishi").show();
                $(".tishiBg").show();
                setTimeout(function () {
                    $(".copyTishi").hide();
                    $(".tishiBg").hide();
                },2000);
            }
            
            var scrollTop = 0;
            
            $(".zh").on("click",function(){
                var id = $(this).attr("data-id");
                // 保存当前滚动位置
                scrollTop = $(window).scrollTop();
                $(".zc,.bili").show();
                $("body").addClass("modal-open").css('top', -scrollTop + 'px');
                $("#oid").val(id);
            }); 
            $(".cancel").on("click",function(){
                $(".zc,.bili").hide();
                $("body").removeClass("modal-open").css('top', '');
                // 恢复滚动位置
                $(window).scrollTop(scrollTop);
                $("#oid").val(0);
            }); 
        </script>
    </div>
</div>
{include(foot)}
</body>
</html>
